<template>
  <div class="a_box" v-if="article">
      <div class="head">{{article.title}}</div>
      <div class="msg">发布：{{article.create_time}}   来源：爱员工</div>
      <!-- <div class="banner"></div> -->
      <div class="vmcontent" v-html="article.content"></div>
      <!-- <div class="para">
          <p>股权投资、股权转让的利润是非常大的，利润临的是高额的个税缴纳。下面爱员工小编给大家分人股权转让如何合理避税的办法。</p>
      </div>
      <div class="para">
          <p class="pt">一、股权转让阴阳合同中的“避税”条款无效：</p>
          <p>股权主体指的是被投资的企业。比如，某某公司甲乙丙三个股东，甲为公司制企业，乙为个独，丙司个人股东，在这个某某公司中甲就是股权主体，被司的企业主体，甲乙丙就是持股主体。</p>
      </div>
      <div class="para">
          <p class="pt">二、企业股东转让股权并完成工商变更，即使没有收到股权转让款也要缴税。</p>
          <p> 近年来，股权投资行业在世界范围内发展迅速司权投资及企业治理方法受到了人们的广泛关注。股司资者通过运用股票期权及可转换优先股等合同设计司能够达到对投资企业高管层的激励作用，降低投资司企业管理层之间的冲突，展现出股权投资对公司治司作用。</p>
          <p>以上是关于个人股权转让如何避税的内容司供参考。欢迎关注爱员工税务公众号：aishouru了解更多实用的避税妙招。</p>
      </div>
      <div class="dashed"></div> -->
      <div class="key">
          <div>关键词：</div>
          <div>
            <span v-for="t in article.seo_keywords.split('，')">{{t}}</span>
          </div>
      </div>
      <div class="ilink">
        <router-link v-if="article.prev" :to="article.prev.href" tag="div">
          <span>上一篇：</span>{{article.prev.title}}
        </router-link>
        <router-link v-if="article.next" :to="article.next.href" tag="div">
          <span>下一篇：</span>{{article.next.title}}
        </router-link>
      </div>
      <div class="newest">
          <div>最新文章</div>
          <sitem v-if="msgs" v-for="msg in msgs" :msg="msg" :key="msg.img"/>
          <more url="/news/"/>
      </div>
      <div class="line"></div>
      <div class="rela" v-if="alist">
          <div>相关专题</div>
           <aitem :msg="alist[0]" />
           <router-link class="alist" v-for="(msg, i) in alist" v-if="i != 0" :style="{'margin-top': (i == 0 ? '0.5rem' : '0.3rem')}" :to="msg.href" :key="msg.title" tag="div">{{msg.title}}</router-link>
      </div>
      <div class="ad"></div>
  </div>
</template>
<script>
import sitem from "./public/Sitem";
import more from "./public/More";
import aitem from "./public/Aitem";
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      msgs: null,
      alist: null,
      article: null,
      t: null,
      id: null,
      related: {
        101: 105,
        102: 106,
        103: 107,
        109: null
      }
    };
  },
  activated() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
    clearInterval(this.t);
    this.t = setInterval(
      function() {
        if (
          !this.$route.params.id ||
          isNaN(parseInt(this.$route.params.id.split("p")[1]))
        ) {
          clearInterval(this.t);
          return;
        }
        if (
          this.$route.params.id.split("p").length &&
          this.id != parseInt(this.$route.params.id.split("p")[1])
        ) {
          this.getArticle();
        }
      }.bind(this),
      100
    );
    this.getArticle();
    Post(
      `${Port}/mobile/cms/news`,
      {
        page_size: 3
      },
      function(data) {
        this.msgs = data;
      }.bind(this)
    );
  },
  methods: {
    getArticle() {
      this.id = parseInt(this.$route.params.id.split("p")[1]);
      Post(
        `${Port}/mobile/cms/main_new`,
        {
          id: this.id
        },
        function(data) {
          this.article = data[0];
          Post(
            `${Port}/mobile/cms/subjects`,
            {
              page_size: 3,
              cid: this.related[data[0].cid]
            },
            function(data) {
              this.alist = data;
            }.bind(this)
          );
          setTimeout(
            function() {
              this.$parent.updata();
            }.bind(this),
            50
          );
        }.bind(this)
      );
    }
  },
  components: {
    sitem,
    more,
    aitem
  }
};
</script>
<style scoped>
.head {
  font-size: 0.45rem;
  line-height: 0.68rem;
  color: #333;
  font-weight: bold;
  text-align: center;
  padding: 0.58rem 0.4rem 0;
}
.msg {
  font-size: 0.24rem;
  color: #999;
  text-align: center;
  margin-top: 0.5rem;
}
.banner {
  width: 6.9rem;
  height: 4.6rem;
  background-size: cover;
  background-image: url("~@/assets/articlen/banner.png");
  margin: 0.55rem auto;
}
.para {
  margin-top: 0.4rem;
  padding: 0 0.3rem;
  font-size: 0.3rem;
  color: #333;
  line-height: 0.56rem;
  text-indent: 0.55rem;
}
.para > p {
  margin-bottom: 0.3rem;
}
.pt {
  text-indent: 0;
  font-weight: bold;
}
.dashed {
  border-bottom: 0.02rem dashed #dadada;
}
.key {
  padding: 0.45rem 0.3rem 0;
  line-height: 0.56rem;
}
.key > div:nth-child(1) {
  font-size: 0.28rem;
  color: #999;
}
.key > div:nth-child(2) {
  font-size: 0.32rem;
  color: #333;
}
.key span {
  margin-left: 0.14rem;
}
.ilink {
  font-size: 0.32rem;
  line-height: 0.56rem;
  color: #333;
  padding: 0.5rem 0.3rem 0;
}
.ilink > div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0.2rem;
}
.ilink span {
  color: #999;
}
.newest {
  font-size: 0.34rem;
  color: #333;
  padding: 0.8rem 0.3rem 0.2rem;
  margin-top: 0.6rem;
  background-color: #f8f8f8;
}
.newest > div:nth-child(1) {
  font-weight: bold;
  margin-bottom: 0.1rem;
}
.line {
  height: 0.2rem;
  background-color: #f2f2f2;
}
.rela {
  background-color: #f8f8f8;
  padding: 0.8rem 0 0.7rem 0;
}
.rela > div:nth-child(1) {
  font-size: 0.34rem;
  color: #333;
  font-weight: bold;
  padding: 0 0.3rem 0.4rem;
}
.alist {
  font-size: 0.32rem;
  color: #333;
  /* text-align: center; */
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 0.3rem;
}
.ad {
  width: 6.92rem;
  height: 3rem;
  background-image: url("~@/assets/article/ad.png");
  background-size: cover;
  margin: 0.8rem auto 1rem;
}
</style>
